<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
import CustomerHeader from "@/layout/header/index.vue";
import PortalCard from "./components/PortalCard/index.vue";
import { getNotice, getTopNotice } from "@/api/notice/index";

interface FormModule {
  title: string;
  content: string;
  createTime: string;
}

export default defineComponent({
  name: "Protal",
  components: { CustomerHeader, PortalCard },

  setup(props, { emit, expose }) {
    const formInline = reactive<FormModule>({
      title: "",
      content: "",
      createTime: "",
    });

    const getImageUrl = (name: string) => {
      return new URL(`/src/assets/images/${name}`, import.meta.url).href;
    };

    const state = reactive({
      dialogTableVisible: false,
    });

    const tableData: any = ref([]);
    const topNoticeData: any = ref([]);

    const getNoticeList = () => {
      getNotice().then((res) => {
        let r = res.data.data;
        tableData.value = [];
        r.forEach((element: any) => {
          let o = {
            title: element.Title,
            content: element.Content,
            createTime: element.CreateTime,
          };
          tableData.value.push(o);
        });
      });
    };

    const getNoticeTopList = () => {
      getTopNotice().then((res) => {
        let r = res.data.data;
        topNoticeData.value = [];
        r.forEach((element: any) => {
          let o = {
            title: element.Title,
          };
          topNoticeData.value.push(o);
        });
      });
    };

    const CardArray = ref([
      {
        imgUrl: getImageUrl("土地利用现状.png"),
        title: "土地利用现状占压分析",
        content:
          "提供导入地块对现状数据占压分析服务，实现占压农用地、建设用地、未利用地统计分析。",
        date: "2021年11月",
      },
      {
        imgUrl: getImageUrl("规划管控.png"),
        title: "土地利用总体规划占压分析",
        content: "提供导入",
        date: "2021年11月",
      },
      {
        imgUrl: getImageUrl("永久基本农田.png"),
        title: "永久基本农田占压分析",
        content: "提供导入",
        date: "2021年11月",
      },
      {
        imgUrl: getImageUrl("建设用地.png"),
        title: "建设用地压覆重要矿产资源分析",
        content:
          "提供导入地块对现状数据占压分析服务，实现占压农用地、建设用地、未利用地统计分析。",
        date: "2021年11月",
      },
      {
        imgUrl: getImageUrl("规划管控.png"),
        title: "矿产资源规划分析",
        content: "提供导入",
        date: "2021年11月",
      },
      {
        imgUrl: getImageUrl("永久基本农田.png"),
        title: "建设用地覆盖分析",
        content: "提供导入",
        date: "2021年11月",
      },
    ]);

    onMounted(async () => {
      getNoticeList();
      getNoticeTopList();
    });

    return {
      getImageUrl,
      CardArray,
      ...toRefs(state),
      formInline,
      tableData,
      topNoticeData,
    };
  },
});
</script>

<template>
  <div class="portal-page-wrap">
    <CustomerHeader></CustomerHeader>
    <el-main>
      <div class="jumbotron">
        <div class="jumbotron-title">
          <h2 class="jumbotorn-title1">丰富的服务.数据.图集.应用资源</h2>
          <h4 class="jumbotorn-title2">
            矢量瓦片技术 | 海量数据 | 标准服务接口
          </h4>
          <p class="jumbotorn-title3">
            集空间信息的应用，服务为一体的巴州信息平台
          </p>
        </div>
      </div>
      <div class="notice">
        <div>
          <svg
            t="1636686133316"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10031"
            width="20"
            height="40"
          >
            <path
              d="M1022.906 511.011c0 108.813-43.686 212.872-124.792 285.51-4.275 3.835-9.617 5.718-14.951 5.718-6.151 0-12.278-2.521-16.7-7.46-8.257-9.215-7.485-23.4 1.736-31.657 71.63-64.144 109.872-156.034 109.872-252.11 0-94.219-36.922-184.884-106.254-248.747-9.093-8.391-9.68-22.577-1.289-31.683 8.391-9.093 22.564-9.693 31.67-1.302C980.714 301.623 1022.906 404.303 1022.906 511.011L1022.906 511.011zM824.111 511.023c0 68.63-30.4 133.017-83.403 176.665-4.161 3.452-9.214 5.118-14.237 5.118-6.458 0-12.877-2.789-17.312-8.174-7.868-9.546-6.503-23.674 3.063-31.549 42.614-35.103 67.061-86.874 67.061-142.059 0-53.386-23.158-104.078-63.544-139.086-9.349-8.098-10.357-22.258-2.246-31.606 8.111-9.368 22.251-10.363 31.619-2.259C795.319 381.592 824.111 444.639 824.111 511.023L824.111 511.023zM582.256 830.571 252.434 681.754 252.434 334.837l329.821-149.181L582.255 830.571 582.256 830.571zM65.291 664.333 65.291 375.218c0-12.36 10.05-22.405 22.417-22.405l107.588 0 0 333.931L87.709 686.744C75.342 686.744 65.291 676.693 65.291 664.333L65.291 664.333zM627.224 116.311c-6.337-4.141-14.326-4.831-21.237-1.819l-392.938 177.08L71.296 291.572c-37.075 0-69.3 30.158-69.3 67.233l0 319.886c0 37.075 32.225 67.246 69.3 67.246l142.04 0 393.155 165.37c2.725 1.104 5.584 1.646 8.436 1.646 4.397 0 8.768-1.295 12.52-3.835 6.19-4.161 9.897-11.123 9.897-18.582L637.344 135.053C637.345 127.504 633.535 120.459 627.224 116.311L627.224 116.311zM627.224 116.311"
              p-id="10032"
              fill="rgb(185,190,187)"
            />
          </svg>
        </div>

        <div class="notice-item">
          <el-carousel height="40px" direction="vertical" :autoplay="true">
            <el-carousel-item
              v-for="(item, index) in topNoticeData"
              :key="index"
            >
              <span>{{ item.title }}</span>
            </el-carousel-item>
          </el-carousel>
        </div>

        <div :span="8" class="notice-sign">
          <el-button
            style="background: red; color: white"
            size="mini"
            @click="dialogTableVisible = true"
            >more</el-button
          >
        </div>
        <el-dialog width="80%" v-model="dialogTableVisible" title="更多新闻">
          <el-table :data="tableData" style="width: 100%" max-height="450">
            <el-table-column prop="title" label="公告"></el-table-column>
            <el-table-column prop="content" label="内容"></el-table-column>
            <el-table-column
              prop="createTime"
              label="发布日期"
            ></el-table-column>
          </el-table>
        </el-dialog>
      </div>

      <div class="system-link-content">
        <div class="system-inner">
          <div class="content-title">系统链接</div>
          <el-row  >
            <el-col :span="4">
              <div style="width: 10%; margin-right: 2.5%">
                      <img class="left-photo" :src="getImageUrl('专题应用.png')" />
                    </div>     
            </el-col>
            <el-col :span="20" class="content-body">
              <el-row class="content-body">
                        <!-- <div style="width: 10%; margin-right: 2.5%">
                          <img class="left-photo" :src="getImageUrl('专题应用.png')" />
                        </div>              -->
                <el-col :span="24" class="content-body-right">
                  <div class="item-ele">
                    <div>
                      <div class="item-title">
                        <a href="http://10.10.24.24" target="_blank">电子政务</a>
                      </div>
                      <div class="item-body">
                        巴州自然资源局电子政务系统
                      </div>
                    </div>
                    <img class="item-photo" :src="getImageUrl('电子政务.png')" />
                  </div>
                  <el-divider
                    direction="vertical"
                    style="height: 180px"
                  ></el-divider>
                  <div class="item-ele">
                    <div>
                      <div class="item-title">
                        <a href="http://10.10.24.23:8045" target="_blank">实施监管</a></div>
                      <div class="item-body">
                        巴州国土空间规划"一张图"实施监管系统
                      </div>
                    </div>
                    <img
                      class="item-photo"
                      :src="getImageUrl('空间规划监管.png')"
                    />
                  </div>
                  <el-divider
                    direction="vertical"
                    style="height: 180px"
                  ></el-divider>
                  <div class="item-ele">
                    <div>
                      <div class="item-title"><a href="http://10.10.24.50:8099/Login" target="_blank">数据管理</a></div>
                      <div class="item-body">
                        巴州国土空间规划基础信息平台数据管理系统
                      </div>
                    </div>
                    <img
                      class="item-photo"
                      :src="getImageUrl('数据管理.png')"
                    />
                  </div>
                </el-col>
              </el-row> 
              <el-row class="content-body">
                <el-col :span="24" class="content-body-right">
                  <div class="item-ele">
                    <div>
                      <div class="item-title">
                        <a href="http://33.89.37.98:8041/natural" target="_blank">自治区空基平台</a>
                      </div>
                      <div class="item-body">
                        新疆维吾尔自治区国土空间基础信息平台
                      </div>
                    </div>
                    <img class="item-photo" :src="getImageUrl('电子政务.png')" />
                  </div>
                  <el-divider
                    direction="vertical"
                    style="height: 180px"
                  ></el-divider>
                  <div class="item-ele">
                    <div>
                      <div class="item-title">
                        <a href="http://33.89.38.10:8091/gdmap/" target="_blank">自治区“一张图”实施监管</a></div>
                      <div class="item-body">
                        新疆维吾尔自治区“一张图“实施监督系统
                      </div>
                    </div>
                    <img
                      class="item-photo"
                      :src="getImageUrl('空间规划监管.png')"
                    />
                  </div>
                  <el-divider
                    direction="vertical"
                    style="height: 180px"
                  ></el-divider>
                  <div class="item-ele">
                    <div>
                      <div class="item-title"><a href="http://33.89.17.108/" target="_blank">土地利用计划</a></div>
                      <div class="item-body">
                      土地利用计划管理系统
                      </div>
                    </div>
                    <img
                      class="item-photo"
                      :src="getImageUrl('数据管理.png')"
                    />
                  </div>
                </el-col>
              </el-row> 
              <el-row class="content-body">            
                <el-col :span="24" class="content-body-right">
                  <div class="item-ele">
                    <div>
                      <div class="item-title">
                        <a href="http://33.89.17.104/" target="_blank">土地市场动态监测监管</a>
                      </div>
                      <div class="item-body">
                      土地市场动态监测监管系统
                      </div>
                    </div>
                    <img class="item-photo" :src="getImageUrl('电子政务.png')" />
                  </div>
                  <el-divider
                    direction="vertical"
                    style="height: 180px"
                  ></el-divider>
                  <div class="item-ele">
                    <div>
                      <div class="item-title">
                        <a href="http://33.89.37.103:8080/wui/index.html" target="_blank">厅综合业务管理</a></div>
                      <div class="item-body">
                        自然资源厅综合业务管理系统
                      </div>
                    </div>
                    <img
                      class="item-photo"
                      :src="getImageUrl('空间规划监管.png')"
                    />
                  </div>
                  <el-divider
                    direction="vertical"
                    style="height: 180px"
                  ></el-divider>
                  <div class="item-ele">
                    <div>
                      <div class="item-title"><a href="https://10.255.204.32/epf-system/#/login" target="_blank">建设用地预审与选址</a></div>
                      <div class="item-body">
                      建设用地预审与选址意见书备案系统
                      </div>
                    </div>
                    <img
                      class="item-photo"
                      :src="getImageUrl('数据管理.png')"
                    />
                  </div>
                </el-col>
              </el-row> 
              <el-row class="content-body">            
                <el-col :span="24" class="content-body-right">
                  <div class="item-ele">
                    <div>
                      <div class="item-title">
                        <a href="http://33.89.17.105/web/Portal/szfba/login/Login.aspx" target="_blank">建设用地备案</a>
                      </div>
                      <div class="item-body">
                      建设用地备案系统
                      </div>
                    </div>
                    <img class="item-photo" :src="getImageUrl('电子政务.png')" />
                  </div>
                  <el-divider
                    direction="vertical"
                    style="height: 180px"
                  ></el-divider>
                  
                  <div class="item-ele">
                    <div>
                      <div class="item-title">
                        <a href="http://33.89.24.250/onemap" target="_blank">2020年以前一张图</a>
                      </div>
                      <div class="item-body">
                      2020年以前一张图系统
                      </div>
                    </div>
                    <img class="item-photo" :src="getImageUrl('电子政务.png')" />
                  </div>
                  <el-divider
                    direction="vertical"
                    style="height: 180px"
                  ></el-divider>
                  <div class="item-ele">
                    <div>
                      <div class="item-title"><a href="http://33.89.24.138/bz_egov" target="_blank">2020年以前报件</a></div>
                      <div class="item-body">
                      2020年以前报件系统
                      </div>
                    </div>
                    <img
                      class="item-photo"
                      :src="getImageUrl('数据管理.png')"
                    />
                  </div>
                </el-col>
              </el-row>              
            </el-col>
          </el-row>

              
        </div>
      </div>
      <div class="serve">
        <div class="serve-body">
          <div class="serve-title">应用分析</div>
          <div class="serve-bodyin">
            <template v-for="item in CardArray" :key="item.Id">
              <PortalCard :data="item"></PortalCard>
            </template>
          </div>
        </div>
        <div class="footer">
          <p>支持浏览器Chrome 360安全浏览器 Firefox等主流浏览器</p>
          <p>版权所有:©2020-巴音郭楞蒙古自治州自然资源局-版本:1.0.1</p>
        </div>
      </div>
    </el-main>
  </div>
</template>

<style lang="less" scoped>
.portal-page-wrap {
  .jumbotron {
    width: 100%;
    height: 360px;
    background-image: linear-gradient(to right, #00befa, #0264eb);
    display: flex;
    align-items: center;
    color: white;
    .jumbotron-title {
      margin-left: 40px;
      .jumbotorn-title1 {
        font-size: 1.8em;
        font-weight: 200;
      }
      .jumbotorn-title2 {
        font-size: 1.2em;
        font-weight: 400;
      }
      .jumbotorn-title3 {
        font-weight: 500;
      }
    }
  }
  .notice {
    width: 80%;
    margin: 0 auto;
    height: 40px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    .notice-item {
      color: #809beb;
      line-height: 40px;
      flex: 1;
    }
    .notice-sign {
      display: flex;
      justify-content: end;
      align-items: center;
    }
  }

  .system-link-content {
    background-color: #f2f2f2;
    .system-inner {
      margin: 0 auto;
      width: 80%;
      .content-title {
        color: #555454;
        padding: 8px 0;
        font-weight: 800;
      }
      .content-body {
        img.left-photo {
          min-width: 100px;
          width: 100%;
          // height: 200px;
          height:800px !important;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        }

        .content-body-right {
          display: flex;
          align-items: center;
          background-color: #fff;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
          max-height: 200px;

          .item-ele {
            padding: 0 10px;
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .item-title {
              font-weight: bold;
            }

            .item-body {
              color: darkgray;
            }
            img {
              width: 100px;
              height: 100px;
              margin: 8px 0;
            }
          }
        }
      }
    }
  }

  .serve {
    background-color: #f4f4f4;
    .serve-body {
      // margin: 0 100px;
      background-color: #f4f4f4;

      margin: 0 auto;
      width: 80%;
      .serve-title {
        color: #555454;
        font-weight: 800;
        padding: 10px 0;
      }
      .serve-bodyin {
        border-radius: 5px;
        background-color: #fff;
        padding: 20px 10px;
        display: flex;
        flex-wrap: wrap;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      }
    }
  }
  .footer {
    color: darkgray;
    text-align: center;
    width: 100%;
    margin: 10px auto 0 auto;
    padding-bottom: 10px;
  }
}
img.left-photo {
          min-width: 280px !important;
          width: 100% !important;
          // height: 200px;
          height:724px !important;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        }
</style>

<style lang="less" scoped>
:deep(.el-table__body-wrapper) {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: rgb(50, 126, 222);
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 10px;
    background-color: transparent;
  }
}
</style>
